import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { connect } from 'react-redux';
import { Row, Col, Select, Table, Checkbox, Button, Input, Switch, Modal } from 'antd';
const Option = Select.Option;
// import {
// 	getDataSourceList
// } from '../../action';
import _ from 'lodash';
const styles = {
	wrapper: {
    height: '100%',
    width: 'calc(100% - 300px)',
    margin: '0px auto'
	},
	wrapperView: {
		height: '100%',
    width: 'calc(100% - 50px)',
    margin: '0px auto'
	}
}

export default class HandleField extends Component {
	constructor(props) {
		super(props);
		this.tableColumns = [
			{ title: '加入的原始字段', dataIndex: 'columnName', key: 'columnName' },
			{ title: '重命名', dataIndex: 'columnOtherName', key: 'columnOtherName', render: this.renderName },
			{ title: '加入索引', dataIndex: 'indexed', className: 'center-col', key: 'indexed', render: this.renderIndexed },
			// { title: '操作', dataIndex: '', className: 'center-col', key: 'action', render: this.renderAction }
		],
		this.state = {
			loading: false
		}
	}
	componentDidMount() {

	}
	changeIndexed = (record, value) => {
		const { label } = this.props;
		this.props.createIndexArray(record);
		
		// if (label) {
		// 	this.props.dispatch(this.props.createIndex({label, prop: record.columnName}));
		// } else {
		// 	Modal.error('请先输入节点名称');
		// }
	}
	changeInput = (record, e) => {
		const {columns} = this.props;
		const index = columns.findIndex(item => item.columnName === record.columnName);
		this.props.changeColumnOtherName(index, e.target.value);
	}
	handleCancel = () => {
		history.back();
	}
	submitResult() {
		const { label, columns, uri, createNode, dataSourcelist, createdNodesList, indexArray } = this.props;
		const finalColumns = columns.reduce((pre, item) => Object.assign(pre, {[item.columnName]: item.columnOtherName ? item.columnOtherName : item.columnName}), {});
		// if (createdNodesList.find(item => item.label == label)) {
		// 	Modal.error({
		// 		title: '与当前节点名称的节点已被创建'
		// 	});
		// 	return;
		// }
		if (_.uniq(Object.values(finalColumns)).length < Object.keys(finalColumns).length) {
			Modal.error({
				title: '不能存在相同的重命名'
			});
			return;
		}
		if (!label) {
			Modal.error({
				title: '节点名称不能为空'
			});
			return;
		}
		let selectedDatasource = dataSourcelist.find(item => item.storePath == uri);
		let finalUri = `http://192.168.3.130:8888/${uri}/graphdata.csv`;
		const postData = {
			// ref_id: '',
			label,
		 	columns: finalColumns,
			source_uri: finalUri,
			source_name: selectedDatasource.name,
			indexes: indexArray
		};
		this.setState({
			loading: true
		})
		this.props.dispatch(createNode(postData, (resp) => {
			this.setState({
				loading: false
			})
			history.back();
		}));
		// history.back();
	}
	renderName = (text, record) => {
		return (
			<Input disabled={this.props.handleType === 'view'} value={text} onChange={this.changeInput.bind(null, record)}/>
		)
	}
	renderIndexed = (text, record) => {
		const { indexArray } = this.props;
		return (
			<Checkbox disabled={this.props.handleType === 'view'} style={{padding: 0}} checked={indexArray.indexOf(record.columnName) !== -1} onChange={this.changeIndexed.bind(null, record)}></Checkbox>
		)
	}
	renderAction = (text, record) => {
		return (
			<div>
				<span style={{color: '#2baee9', cursor: 'pointer'}}>删除</span>
			</div>
		)
	}
	render() {
		const { columns } = this.props;
		const tableColumns = this.tableColumns;
		const dataSource = this.props.columns.map((item, index) => {
			return Object.assign(item, {key: index});
		})
		return (
			<div style={this.props.handleType === 'view' ? styles.wrapperView : styles.wrapper}>
				<Table className="reedsec_table"
							 pagination={false}
							 dataSource={dataSource}
							 columns={tableColumns}/>
				{
					this.props.handleType === 'view' ?
					<Row style={{marginTop: 20}}>
						<Button className="reedsec_btn" type="primary" size="large" onClick={this.handleCancel}>返回</Button>
					</Row>
					:
					<Row style={{marginTop: 20}}>
						<Button className="reedsec_btn_default" size="large" onClick={this.handleCancel}>取消</Button>
						<Button loading={this.state.loading} className="reedsec_btn" type="primary" size="large" onClick={this.submitResult.bind(this)}>确定</Button>
					</Row>
				}
			</div>
		)
	}
}
